<template>
    <div class="tab-card">
        <el-tabs v-model="tabIndex" :class="face" @tab-change="handleTabChange">
            <el-tab-pane
                v-for="(item, i) in list"
                :key="i"
                :label="item.name"
                :name="i"
            />
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
interface NavItem {
  name: string;
  path?: string;// 默认选中
}

const emit = defineEmits(['change'])
const props = withDefaults(
    defineProps<{
        // 选项列表
        list: NavItem[];
        // 默认选中
        index?: number;
        // 跳转模式: [link=标签跳转,tab=参数路径]
        mode?: string;
        // 风格样式: [white=白底, grey=灰底]
        face?: string;
    }>(),
    {
        index: 0,
        mode: 'link',
        face: 'white'
    }
)

// 路由对象
const router = useRouter()

// 当前下标
const tabIndex = ref<number>(0)

/**
 * 选项切换
 */
const handleTabChange = (index: any) => {
    emit('change', index)
    const path = props.list[index].path || ''
    if (props.mode === 'link') {
        router.push(path)
    } else if (props.mode === 'tab') {
        router.replace({
            query: {
                'currentTab': path
            }
        })
    }
}

/**
 * 监听切换
 */
watch(
    () => props.index,
    (val) => {
        tabIndex.value = val
    },
    { immediate: true }
)
</script>

<style scoped lang="scss">
.tab-card {
    :deep(.el-tabs) {
        box-sizing: border-box;
        display: inline-block;
        padding: 6px;
        background-color: var(--el-bg-color);
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 2%);
        .el-tabs__header {  margin-bottom: 0; }
        .el-tabs__nav-wrap::after, .el-tabs__active-bar { height: 0 !important; }
        .el-tabs__item {
            padding: 0 20px !important;
            color: var(--el-text-color-regular);
            border-radius: 8px;
            &.is-active {
                color: var(--el-color-primary);
                background-color: var(--el-bg-color-page);
            }
            &:hover {
                color: var(--el-color-primary);
            }
        }
        &.grey {
            background-color: var(--el-bg-color-page);
            .el-tabs__item {
                &.is-active {
                    color: var(--el-color-primary);
                    background-color: var(--el-bg-color);
                }
                &:hover {
                    color: var(--el-color-primary);
                }
            }
        }
    }
}
</style>
